<template>
  <div class="work-main">
    <div class="work" :style="{ height: setHeight }" @click="handleWork">
      <div class="work-img">
        <img src="./workShop.png" />
      </div>
    </div>
  </div>
</template>

<script>
import { getClientHeight } from "@/utils/index";
export default {
  data() {
    return {
      setHeight: "300px",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.setHeight = getClientHeight(175) + "px";
    });
  },
  methods: {
    handleWork() {
      this.$emit("handleWork");
    },
  },
};
</script>

<style lang="scss" scoped>
.work-main {
  .work {
    overflow: auto;
    .work-img img {
      width: 100%;
    }
  }
  /deep/ ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ ::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/ ::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /deep/ ::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
}
</style>